import { Card, List, Tag } from "antd";
import React, { useEffect, useState } from "react";
import { setLocale } from "umi-plugin-react/locale";
import styles from './Login.less'
import moment from "moment";
import { connect } from 'dva';

class MultiUserSelection extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      tenantList:[]
    }
  }

  componentDidMount(){
    const { location:{param},history } = this.props;
    if(param && param.tenantList){
      this.setState({
        tenantList:param.tenantList
      })
    }else{
      history.push({pathname:"/user/login"})
    }
  }

  toLoginItem = data => {
    if(!data.validity || data.status == 1 || data.tenantBanned == 1){
      return false
    }
    const locale = data.language
    if (locale) {
      setLocale(locale, false)
    }
    const { dispatch } = this.props;
    dispatch({
      type: "login/loginToTenant",
      payload: {
        id:data.id,
        username:data.name,
        tenantId:data.tenantId,
        type:data.type,
        path:data.path,
        nick:data.nick,
        isAdmin:data.isAdmin,
        applicationId:data.applicationId,
        language: data.language,
        mobilePhone: data.mobilePhone
      },
      callback: (res) => {
        console.log('选择租户后的回调',res);

      },
    });
  }

  render(){
    const { tenantList } = this.state;
    return(
      <div style={{padding:'32px',background:"#ffffff",height:"100%"}} className={styles.userSelect}>
        <div style={{fontSize:20,color:"rgba(0,0,0,0.9)",lineHeight:'28px',marginBottom:26}}>选择租户进入</div>
        <div className={styles.userList}>
          {
            tenantList.map(item => {
              return (
                <div style={{width:'25%',padding:"8px",flexShrink:"0",
                cursor:!item.validity || item.status == 1 || item.tenantBanned == 1 ? 'no-drop' : "pointer",
              }}
                onClick={() => this.toLoginItem(item)}
              >
                  <div className={styles.userItem} style={{
                    background:!item.validity || item.status == 1 || item.tenantBanned == 1 ? 'rgba(241,241,241,0.9)' : '#ffffff',

                  }}>
                    <div className={styles.itemTop}>
                      <div className={styles.topLeft}>
                        <div className={styles.name}>{item.tenantName}</div>
                        {
                          item.validity ? "" : <Tag color="red">已过期</Tag>
                        }
                        {
                          item.status == 1 || item.tenantBanned == 1 ? <Tag color="red">禁用</Tag> : ''
                        }
                        {
                          item.lastLoginTime ? <div className={styles.time}>{moment(item.lastLoginTime).format("YYYY-MM-DD HH:mm:ss")}</div> : ''
                        }
                      </div>
                      <div className={styles.topRight}>
                        {
                          item.picture ? <img src={item.picture} /> : <img src="../../../robotConfigImg/user.png" />
                        }
                      </div>
                    </div>

                    <div className={styles.itemBottom}>
                      {
                        item.roleNameList ? item.roleNameList.map((rol,index) => {
                          return (
                            <div key={index} className={styles.rolItem}>{rol}</div>
                          )
                        }) :''
                      }
                    </div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}


export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(MultiUserSelection);
